<template>
	<div>
		<!-- 查询框 -->
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
			<el-form-item label="名称">
				<el-input v-model="queryForm.name" placeholder="菜单名称"></el-input>
			</el-form-item>
			<el-form-item label="选择菜单">
				<el-select v-model="queryForm.parentId" placeholder="选择菜单" clearable="">
					<el-option v-bind:label="item.name" :value="item.id" v-for="item in menuList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="querySubmit">查询</el-button>
			</el-form-item>
		</el-form>
		
<!-- 		<el-table :data="tableData">
			<el-table-column label="名称" prop="name"></el-table-column>
		</el-table> -->
		
		<el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="#" prop="id" width="50"></el-table-column>
			<el-table-column prop="name" label="名称" width="100">
				<template slot-scope="scope">
					<span :title="scope.row.iconCls">{{scope.row.name}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="path" label="路径" width="100">
				<template slot-scope="scope">
					<span :title="scope.row.component">{{scope.row.path}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="parentName" label="所属菜单" width="100">
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					{{scope.row.enabled==1?'启用':'停用'}}
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="createTime">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="edit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination :page-count="pageCount" :current-page="queryForm.current" @current-change="gotoPage" layout="prev, pager, next">
		</el-pagination>

		<div>
			<el-button size="mini" type="danger" @click="batchDel()">批删</el-button>
			<el-button size="mini" @click="add">添加</el-button>
		</div>


		<!-- 对话框添加班级信息 -->
		<el-dialog title="菜单/添加/编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="菜单名称">
					<el-input v-model="form.name" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item label="所属菜单">
					<el-select v-model="form.parentId" placeholder="选择菜单" clearable="">
						<el-option label="请选择" :value="0"></el-option>
						<el-option v-bind:label="item.name" :value="item.id" v-for="item in menuList"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="菜单图标">
					<el-input v-model="form.iconCls"></el-input>
				</el-form-item>

				<el-form-item label="组件名称" v-if="form.parentId>0">
					<el-input v-model="form.component" placeholder="vue组件名称"></el-input>
				</el-form-item>

				<el-form-item label="组件路径" v-if="form.parentId>0">
					<el-input v-model="form.path" placeholder="vue组件访问路径,/开始"></el-input>
				</el-form-item>



				<el-form-item label="是否启用">
					<el-switch v-model="form.enabled"></el-switch>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//查询条件
				queryForm: {
					current: 1,
					size: 5
				},
				//列表数据
				tableData: [],
				//table选择数据Id数组
				selecteIds: [],
				//总页数
				pageCount: 1,
				menuList: [],
				dialogVisible: false,
				form: {
					parentId: 0,
					enabled: true,
					iconCls: "el-icon-s-management"
				},
				userInfo: {}
			}
		},
		methods: {
			handleClose() {
				this.dialogVisible = false;
			},
			save() {
				console.log(this.form);
				//ajax提交班级信息
				this.axios.post(this.$baseUrl + "auth/menu/save", this.form).then(res => {
					if (res) {
						//关闭对话框
						this.form = {};
						this.dialogVisible = false;
						this.$message({
							message: "添加成功",
							type: "success"
						});
						this.querySubmit();
					}
				})
			},
			add() {
				this.form = {
					parentId: 0,
					enabled: true,
					iconCls: "el-icon-s-management"
				};
				this.dialogVisible = true;
			},
			edit(row) {
				this.dialogVisible = true;
				this.form = row;
			},
			handleSelectionChange(rows) {
				console.log(rows);
				// let ids = rows.map(function(row){return row.id});
				let ids = rows.map(row => {
					return row.id
				});
				this.selecteIds = ids;
				console.log("selecteIds:" + this.selecteIds);
			},
			gotoPage(current) {
				this.queryForm.current = current;
				this.list();
			},
			querySubmit() {
				//发送ajax请求，根据queryForm查询数据
				console.log(this.queryForm);
				this.queryForm.current = 1;
				this.list();

			},
			//列表页数据
			list() {
				//发送ajax请求，根据queryForm查询数据
				this.axios.get(this.$baseUrl + "auth/menu/list", {
					params: this.queryForm
				}).then(res => {
					//axios封装了结果，res.data是我们接口的数据
					this.tableData = res.data.data.records;
					console.log(this.tableData);
					//设置分页数量、当前页
					this.pageCount = res.data.data.pages;
					this.queryForm.current = res.data.data.current;
				})
			},
			/* 查询所有班级 */
			listMenu() {
				this.axios.get(this.$baseUrl + "auth/menu/getMenuListByParentId", {
					params: {
						parentId: "0"
					}
				}).then(res => {
					this.menuList = res.data.data;
				})
			}
		},
		created() {
			this.list();
			this.listMenu();
		}
	}
</script>

<style>

</style>
